<template>
  <v-card>
    <img
      class="white--text align-end w-full h-50 object-contain rounded-t-md"
      :src="pageBg"
    />
    <v-card-text class="position-relative">
      <!-- User Avatar -->
      <div
        class="
          bg-white
          w-[68px]
          h-[68px]
          pa-1
          absolute
          top-[-36px]
          rounded-full
        "
      >
        <v-avatar size="60" color="white" class="avatar-center">
          <v-img :src="avatar1" />
        </v-avatar>
      </div>

      <!-- Title, Subtitle & Action Button -->
      <div class="d-flex justify-space-between flex-wrap pt-2">
        <div class="me-2 mb-2 overflow-hidden">
          <v-card-title
            class="flex align-center pt-0 px-0 text-[20px] text-[#736B7D]"
          >
            {{ t('message.dashboard.userInfo.title') }}
            <span class="edit-btn" @click="showEditDialog(true)"><edit /></span>
          </v-card-title>
          <v-card-subtitle class="text-xs pa-0 mt-1 text-[#928D99] break-all">
            {{
              shareUrl !== null && shareUrl !== ''
                ? shareUrl
                : shareCode === ''
                ? '——'
                : config.shortUrlPrefix + `${shareCode}`
            }}
          </v-card-subtitle>
        </div>
        <v-btn
          v-copy="{
            data:
              shareUrl !== null && shareUrl !== ''
                ? shareUrl
                : config.shortUrlPrefix + `${shareCode}`,
            msg: t('message.dashboard.userInfo.copy.success'),
          }"
          color="#9256FD"
          class="text-white"
          :disabled="
            shareUrl === null || shareUrl === ''
              ? shareCode === null || shareCode === ''
                ? true
                : false
              : false
          "
        >
          {{ t('message.dashboard.userInfo.copy.btn') }}
        </v-btn>
      </div>
      <!-- Mutual Friends -->
      <div class="d-flex justify-space-between align-center mt-8">
        <span class="text-[14px] font-medium text-[#736B7D]">
          {{ subordinate }} {{ t('message.dashboard.userInfo.direct') }}
        </span>
        <div class="v-avatar-group flex flex-row">
          <v-avatar size="40">
            <v-img :src="avatar1" />
          </v-avatar>
          <div
            class="
              bg-white
              w-[44px]
              h-[44px]
              pa-[2px]
              rounded-full
              flex
              justify-center
              items-center
              ml-[-10px]
              z-50
            "
          >
            <v-avatar size="40">
              <v-img :src="avatar2" />
            </v-avatar>
          </div>
          <div
            class="
              bg-white
              w-[44px]
              h-[44px]
              pa-[2px]
              rounded-full
              flex
              justify-center
              items-center
              ml-[-10px]
              z-50
            "
          >
            <v-avatar size="40">
              <v-img :src="avatar3" />
            </v-avatar>
          </div>
          <div
            class="
              bg-white
              w-[44px]
              h-[44px]
              pa-[2px]
              rounded-full
              flex
              justify-center
              items-center
              ml-[-10px]
              z-50
            "
          >
            <v-avatar size="40">
              <v-img :src="avatar4" />
            </v-avatar>
          </div>
        </div>
      </div>
    </v-card-text>
  </v-card>

  <v-dialog
    persistent
    class="edit-link-dialog"
    v-model="visible"
    max-width="524px"
  >
    <v-card class="bg-white p-5 m-6">
      <div
        class="
          dialog-header
          text-[#736b7d]
          font-medium
          flex
          justify-between
          pb-9
        "
      >
        <span class="title text-xl">编辑推广链接备份</span>
        <v-icon
          color="gray darken-2"
          class="text-gray-400"
          @click.stop="showEditDialog(false)"
        >
          mdi-close
        </v-icon>
      </div>
      <div class="content">
        <v-text-field
          v-model="linkVal"
          hide-details
          type="text"
          variant="outlined"
          :prefix="prefixStr"
        ></v-text-field>
        <p class="tips text-[#928D99] text-xs pt-2">
          这是一个简单的推广链接，可以轻松访问你的SharkDAO网址。
        </p>
      </div>
      <div class="footer pt-9 flex justify-end">
        <v-btn variant="outlined" color="#2B6FF0" @click="showEditDialog(false)">取消</v-btn>
        <v-btn class="text-[#fff] ml-2" flat @click.stop="handlerUpdate" color="#2B6FF0">保存</v-btn>
      </div>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import pageBg from '@/assets/images/pages/2.png';
import avatar1 from '@/assets/images/avatars/1.png';
import avatar2 from '@/assets/images/avatars/2.png';
import avatar3 from '@/assets/images/avatars/3.png';
import avatar4 from '@/assets/images/avatars/4.png';
import edit from '@/icons/edit.svg?component';
import { reactive, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import config from '@/config';
import Dialog from '@/components/dialog/dialog';
import {
  updateUserInfoApi
} from '@/api/system/user';
interface UserInfoProps {
  shareUrl: string;
  shareCode: string;
  subordinate: number;
}

const props = withDefaults(defineProps<UserInfoProps>(), {
  shareUrl: '',
  shareCode: '',
  subordinate: 0,
});
console.log('props:', props);
const { shareUrl, shareCode, subordinate } = toRefs(props);

const { t } = useI18n();

let state = reactive({
  visible: false,
  prefixStr: 'https://sdao.win/?ref=',
  linkVal: '',
});

const handlerUpdate =() =>{
  let shareUrl=prefixStr.value+linkVal.value
  updateUserInfoApi({
      shortUrl:shareUrl
    })
    .then( (res:any) => {
      console.log('withdrawApi res:', res);
      Dialog(t('message.profile.edit.update.success'));
      visible.value=false;
    })
}
let showEditDialog = (visible: boolean) => {
  state.visible = visible;
};

let { visible, prefixStr, linkVal } = toRefs(state);
</script>

<style lang="scss" scoped>
.edit-btn {
  width: 20px;
  margin-left: 16px;
  cursor: pointer;
}
</style>
<style lang="scss">
.edit-link-dialog {
  .v-overlay__content {
    width: 100%;
  }

  .v-card{
    border-radius: 1rem !important;
  }
  .content {
    .v-text-field__prefix {
      color: #000;
      opacity: 1;
    }

  }
  .footer{
    .v-btn{
      min-width: 6.283rem;
    }
  }
}
</style>
